<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>成员管理</title>
    <link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap.min.css}"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
    <div class="collapse navbar-collapse">
        <form class="form-inline my-1 my-lg-1" th:action="@{/memberList}" method="post">
            <input class="form-control mr-sm-1" type="text" name="id" placeholder="编号">
            <input class="form-control mr-sm-1" type="text" name="name" placeholder="姓名">
            <input class="form-control mr-sm-1" type="text" name="deptName" placeholder="部门">
            <button class="btn btn-outline-info my-1 my-sm-1" type="submit">查找</button>
        </form>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" id="toAddBtn" type="button" data-toggle="modal" data-target="#toAddMember" href="javascript:void(0)">新增成员</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">模板下载</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">批量删除</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">批量导入</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">批量导出</a>
            </li>
        </ul>
    </div>
</nav>

<table class="table table-bordered table-hover">
    <thead>
    <tr>
        <th scope="col">编号</th>
        <th scope="col">姓名</th>
        <th scope="col">性别</th>
        <th scope="col">出生日期</th>
        <th scope="col">入会时间</th>
        <th scope="col">电话</th>
        <th scope="col">部门</th>
        <th scope="col">职务</th>
        <th scope="col">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="data:${memberList}">
        <th scope="row" th:text="${data.id}"></th>
        <td th:text="${data.name}"></td>
        <td th:text="${data.sex}"></td>
        <td th:text="${data.birthday}"></td>
        <td th:text="${data.jointime}"></td>
        <td th:text="${data.phone}"></td>
        <td th:text="${data.dept.name}"></td>
        <td th:text="${data.job.name}"></td>
        <td>
            <a class="text-info updateBtn" type="button" th:data-id="${data.id}" data-toggle="modal" data-target="#toAddMember" href="javascript:void(0)">编辑</a>
            <span>|</span>
            <a class="text-danger deleteBtn" type="button" th:data-id="${data.id}" data-toggle="modal" data-target="#toDeleteMember" href="javascript:void(0)">删除</a>
        </td>
    </tr>
    </tbody>
</table>

<!-- 编辑成员信息-->
<div class="modal fade" id="toAddMember" tabindex="-1" role="dialog" aria-labelledby="newMemberInfo" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="newMemberInfo">编辑成员信息</h5>
                <button type="button" class="close btn-outline-light" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="addMemberForm" action="" method="post">
                    <div class="form-group row">
                        <label class="col-sm-3">编号:</label>
                        <input name="id" type="text" class="form-control col-sm-8">
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3">密码:</label>
                        <input name="password" type="text" class="form-control col-sm-8">
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3">姓名:</label>
                        <input name="name" type="text" class="form-control col-sm-8">
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3">性别:</label>
                        <input name="sex" type="text" class="form-control col-sm-8">
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3">出生日期:</label>
                        <input name="birthday" type="text" class="form-control col-sm-8">
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3">入会时间:</label>
                        <input name="jointime" type="text" class="form-control col-sm-8">
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3">手机:</label>
                        <input name="phone" type="text" class="form-control col-sm-8">
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3">Email:</label>
                        <input name="email" type="text" class="form-control col-sm-8">
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3">部门:</label>
                        <input name="deptName" type="text" class="form-control col-sm-8">
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3">职务:</label>
                        <input name="jobName" type="text" class="form-control col-sm-8">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">返回</button>
                <button id="addOrUpdateBtn" type="button" data-url="" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 确认删除 -->
<div class="modal fade" id="toDeleteMember" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteMember" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmDeleteMember">确认删除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                确认删除该成员？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button id="deleteConfirm" type="button" class="btn btn-primary">删除</button>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/static/js/jquery-3.5.1.min.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
<script>
    function fillModal(data,oprUrl) {
        if(data != null){
            $("#addMemberForm").find("input").eq(0).val(data.id).prop("readonly",true)
                .end().eq(1).val(data.password)
                .end().eq(2).val(data.name)
                .end().eq(3).val(data.sex)
                .end().eq(4).val(data.birthday)
                .end().eq(5).val(data.jointime)
                .end().eq(6).val(data.phone)
                .end().eq(7).val(data.email)
                .end().eq(8).val(data.dept.name)
                .end().eq(9).val(data.job.name);
        }else{
            var emptyStr = "";
            var password = "123456";
            $("#addMemberForm").find("input").eq(0).val(emptyStr).prop("readonly",null)
                .end().eq(1).val(password)
                .end().eq(2).val(emptyStr)
                .end().eq(3).val(emptyStr)
                .end().eq(4).val(emptyStr)
                .end().eq(5).val(emptyStr)
                .end().eq(6).val(emptyStr)
                .end().eq(7).val(emptyStr)
                .end().eq(8).val(emptyStr)
                .end().eq(9).val(emptyStr);
        }
        $("#addOrUpdateBtn").attr("data-url",oprUrl);
    }
    function member(data,oprUrl) {
        $.ajax({
            url:"/member",
            type:"post",
            async: true,
            data: data,
            success:function (resultData) {
                fillModal(resultData,oprUrl);
            },
            error: function (xhr,status,error) {
                console.log(xhr+"--"+status+"--"+error)
            }
        });
    }
</script>
<script>
    //编辑按钮
    $(".updateBtn").click(function () {
        var id = $(this).attr("data-id");
        member("id="+id,"/updateMember");
    });
    //删除按钮
    $(".deleteBtn").click(function () {
       $("#deleteConfirm").attr("data-url",$(this).attr("data-id"));
    });
    //新增成员按钮
    $("#toAddBtn").click(function () {
        fillModal(null,"/addMember");
    });
    //更新&添加按钮
    $("#addOrUpdateBtn").click(function () {
        $("#addMemberForm").attr("action",$(this).attr("data-url")).submit();
    });
    //确定删除
    $("#deleteConfirm").click(function () {
        location.href = "/deleteMember?id="+$(this).attr("data-url");
    });
</script>

</body>
</html>